<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="head(title,keywords)">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI">-->
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="description" content="这里是 宋欣聪 的个人博客，与你一起搬砖创世界。">
    <meta name="keywords" content="宋欣聪, song, 宋欣聪的博客, Song Blog, 博客, 个人网站, 互联网, Web, Java, 后端">
    <meta name="theme-color" content="#000000">

    <!-- Open Graph -->
    <meta property="og:title" content="宋欣聪的博客 | Song Blog">

    <meta property="og:type" content="website">
    <meta property="og:description" content="砖要一块一块地搬，墙要一层一层地砌。">

    <meta property="og:image" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="宋欣聪的博客 | Song Blog">

    <title>宋欣聪的博客 | Song Blog</title>

    <!-- Web App Manifest -->
    <link rel="manifest" th:href="@{/hux/pwa/manifest.json}">

    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/hux/img/logo.png}">

    <!-- Canonical URL -->
    <link rel="canonical" href="">

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="" th:href="@{/hux/css/bootstrap.min.css}">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="" th:href="@{/hux/css/hux-blog.min.css}">

    <!-- Custom Fonts -->
    <!-- <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
    <!-- Hux change font-awesome CDN to qiniu -->
    <link href="" th:href="@{/hux/css/font-awesome.min.css}" rel="stylesheet" type="text/css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- ga & ba script hoook -->
    <script async="" src="" th:src="@{/hux/js/analytics.js}"></script>
    <script src="" th:src="@{/hux/js/fastclick.min.js}"></script>
</head>
<body ontouchstart="">

<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">

    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" th:href="@{/theme/song}">Song Blog</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="huxblog_navbar" class=" ">
            <div class="navbar-collapse" style="height: 0px;">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a th:href="@{/theme/song}">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Archive</a>
                    </li>
                    <!--<li>-->
                        <!--<a href="#">Portfolio</a>-->
                    <!--</li>-->
                </ul>
            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<script>
    // Drop Bootstarp low-performance Navbar
    // Use customize navbar with high-quality material design animation
    // in high-perf jank-free CSS3 implementation
    var $body   = document.body;
    var $toggle = document.querySelector('.navbar-toggle');
    var $navbar = document.querySelector('#huxblog_navbar');
    var $collapse = document.querySelector('.navbar-collapse');

    var __HuxNav__ = {
        close: function(){
            $navbar.className = " ";
            // wait until animation end.
            setTimeout(function(){
                // prevent frequently toggle
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        },
        open: function(){
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }

    // Bind Event
    $toggle.addEventListener('click', function(e){
        if ($navbar.className.indexOf('in') > 0) {
            __HuxNav__.close()
        }else{
            __HuxNav__.open()
        }
    })

    /**
     * Since Fastclick is used to delegate 'touchstart' globally
     * to hack 300ms delay in iOS by performing a fake 'click',
     * Using 'e.stopPropagation' to stop 'touchstart' event from
     * $toggle/$collapse will break global delegation.
     *
     * Instead, we use a 'e.target' filter to prevent handler
     * added to document close HuxNav.
     *
     * Also, we use 'click' instead of 'touchstart' as compromise
     */
    document.addEventListener('click', function(e){
        if(e.target == $toggle) return;
        if(e.target.className == 'icon-bar') return;
        __HuxNav__.close();
    })
</script>
</body>
</html>